<template>
  <div class="page-container">
    <TablePage
      ref="pageRef"
      :headerBtnConfig="headerBtnConfig"
      :formConfig="formConfig"
      :formRules="formRules">
      <el-button @click="updateParams">test {{ formParams }}</el-button>
      <BaseForm
        v-model="formParams"
        :config="formConfig"
        :rules="formRules"
        @confirm="onSubmit"
      >
      </BaseForm>
      <BaseTable></BaseTable>
    </TablePage>
  </div>  
</template>

<script setup>
import TablePage from '@/components/TablePage'
import BaseForm from '@/components/BaseForm'
import BaseTable from '@/components/BaseTable'
import { reactive } from 'vue'

const headerBtnConfig = {
  pageName: '测试',
  parent: {
    label: 'asd',
    handle: () => console.log('back')
  },
  add: {
    handle: () => console.log('add')
  },
  batchDel: {
    handle: () => console.log('batchDel')
  },
  extends: [
    { label: '123' },
    { label: 'asd' }
  ]
}

const formParams = reactive({
  // test: '123123'
})
const formConfig = ref([
  {
    type: 'input',
    field: 'name',
    label: '输入项',
    // default: 'asdasdasd'
  },
  {
    type: 'select',
    field: 'type',
    label: '普通下拉',
    options: [
      { label: '选项一', value: 0 },
      { label: '选项二', value: 1 },
      { label: '选项三', value: 2 },
    ]
  },
  {
    type: 'datePicker',
    field: 'time',
    label: '日期选择',
  },
  {
    type: 'switch',
    field: 'isSwitch',
    label: '开关',
  },
  {
    type: 'checkbox',
    field: 'checkboxVal',
    label: '多选',
    options: [
      { label: '选项一', value: 0 },
      { label: '选项二', value: 1 },
      { label: '选项三', value: 2 },
    ]
  },
  {
    type: 'radio',
    field: 'radioVal',
    label: '单选',
    options: [
      { label: '选项一', value: 0 },
      { label: '选项二', value: 1 },
      { label: '选项三', value: 2 },
    ]
  },
  {
    type: 'input',
    field: 'textarea',
    label: '输入项',
    props: { type: 'textarea' }
  },
  {
    type: 'upload',
    field: 'imgVal',
    label: '图片',
  },
])
const formRules = reactive({
  name: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  type: [
    { required: true, message: '请选择', trigger: 'change' },
  ]
})
function updateParams () {
  formParams.test = 'a123123'
}
function onSubmit(e) {
  console.log('onSubmit', e)
}
</script>

<style>

</style>